Nuxt 대시보드 프로젝트 시리즈 (0): 개요 및 기술 스택 소개

현대적인 웹 서비스에서 관리자 페이지나 데이터 시각화를 위한 대시보드는 필수적입니다. 본 시리즈에서는 2026년 프론트엔드 생태계에서 가장 주목받는 도구들을 조합하여, 확장 가능하고(Scalable), 빠르며(Fast), 아름다운(Beautiful) 대시보드를 구축해 봅니다.

---

1. 사용 기술 스택 (Tech Stack)

① Nuxt.js (Framework)

• Vue.js의 메타 프레임워크로, 자동 라우팅, SSR/SSG 지원, 자동 임포트 등 강력한 기능을 제공합니다.
• 대시보드의 복잡한 구조를 관리하기에 최적화되어 있습니다.

② Naive UI (Component Library)

• TypeScript 기반으로 설계된 고품질의 Vue 3 컴포넌트 라이브러리입니다.
• 커스터마이징이 매우 유연하며, 특히 표(Table)와 트리(Tree) 컴포넌트의 성능이 뛰어납니다.

③ Pinia (State Management)

• Vue의 공식 상태 관리 도구입니다. 가볍고 직관적인 API를 제공하며 TypeScript와 완벽하게 조화됩니다.

④ UnoCSS (Atomic CSS)

• Vite 기반의 초고속 원자형 CSS 엔진입니다.
• Tailwind CSS와 호환되면서도 더 가볍고, Naive UI와 함께 사용했을 때 스타일 충돌이 적습니다.

---

2. 프로젝트 목표

• 반응형 레이아웃: 모바일과 데스크톱 모두에서 완벽하게 작동하는 사이드바 레이아웃 구축.
• 상태 관리 시스템: 사이드바 접힘 상태, 로그인 유저 정보 등을 Pinia로 중앙 제어.
• 컴포넌트 중심 개발: Naive UI를 활용하여 중복 없는 UI 컴포넌트 설계.
• 성능 최적화: UnoCSS를 이용한 최소한의 CSS 번들 크기 유지.

---

3. 시리즈 순서

1. Nuxt 프로젝트 생성 및 초기 설정
2. Naive UI와 UnoCSS 연동하기
3. Pinia를 이용한 상태 관리 설계
4. 대시보드 레이아웃 및 내비게이션 구현
5. 데이터 시각화 및 페이지 구현

자, 이제 첫 번째 단계인 프로젝트 생성부터 시작해 볼까요?